<template>
  <div>
    <!--    头部-->
    <Header/>

    <!--    中间-->
    <div class="nuxt_content">
      <!--      左边-->
      <div class="nuxt_flet">
        <nuxt/>
      </div>
      <!--      右边-->
      <div class="nuxt_right visible-md visible-lg">
        <Sidebar/>
      </div>
    </div>

    <!--    底部-->
    <Footer/>
  </div>
</template>

<script>
  import Header from "~/components/Header";
  import Sidebar from "~/components/Sidebar"
  import Footer from "~/components/Footer"

  export default {
    data() {
      return {
        msg: '111'
      }
    },
    components: {
      Header,
      Sidebar,
      Footer
    },
  };
</script>

<style lang="less" scoped>
  .nuxt_content {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 60px;
    display: flex;

    .nuxt_flet {
      flex: 1;
      /*background-color: orangered;*/
      margin-right: 30px;

    }

    .nuxt_right {
      width: 300px;
      /*background-color: #999999;*/
    }

  }

  // 最大 768px
  @media (max-width: 768px) {
    .nuxt_content .nuxt_flet {
      margin-right: 0;
    }
  }

  // 最小 768px  到  最大 922px
  @media (min-width: 768px) and (max-width: 992px) {
    .nuxt_content .nuxt_flet {
      margin-right: 0;
    }
  }

  // 最小 992px   到 最大 1200px
  @media (min-width: 992px) and (max-width: 1200px) {
  }

  // 最小1200px
  @media (min-width: 1200px) {
  }
</style>
